<template>
  <div class="c-date-picker-test">
    <h3>CDatePicker 组件测试</h3>

    <!-- 基本日期选择 -->
    <div class="test-section">
      <h4>基本日期选择</h4>
      <CDatePicker v-model="basicDate" />
      <div class="selected-value">选中日期: {{ basicDate }}</div>
    </div>

    <!-- 日期范围选择 -->
    <div class="test-section">
      <h4>日期范围选择</h4>
      <CDatePicker
        v-model="dateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <div class="selected-value">选中范围: {{ dateRange }}</div>
    </div>

    <!-- 日期时间选择 -->
    <div class="test-section">
      <h4>日期时间选择</h4>
      <CDatePicker v-model="dateTime" type="datetime" placeholder="选择日期时间" />
      <div class="selected-value">选中日期时间: {{ dateTime }}</div>
    </div>

    <!-- 日期时间范围选择 -->
    <div class="test-section">
      <h4>日期时间范围选择</h4>
      <CDatePicker
        v-model="dateTimeRange"
        type="datetimerange"
        start-placeholder="开始日期时间"
        end-placeholder="结束日期时间"
      />
      <div class="selected-value">选中日期时间范围: {{ dateTimeRange }}</div>
    </div>

    <!-- 带清空功能 -->
    <div class="test-section">
      <h4>带清空功能</h4>
      <CDatePicker v-model="clearableDate" clearable placeholder="可清空的日期选择器" />
      <div class="selected-value">选中日期: {{ clearableDate || '未选择' }}</div>
    </div>

    <!-- 禁用状态 -->
    <div class="test-section">
      <h4>禁用状态</h4>
      <CDatePicker v-model="disabledDate" disabled placeholder="禁用的日期选择器" />
    </div>

    <!-- 不同尺寸 -->
    <div class="test-section">
      <h4>不同尺寸</h4>
      <div class="size-demo">
        <CDatePicker v-model="sizeDate1" size="large" placeholder="large" />
        <CDatePicker v-model="sizeDate2" size="default" placeholder="default" />
        <CDatePicker v-model="sizeDate3" size="small" placeholder="small" />
        <CDatePicker v-model="sizeDate4" size="mini" placeholder="mini" />
      </div>
    </div>

    <!-- 带必填标记 -->
    <div class="test-section">
      <h4>带必填标记</h4>
      <CDatePicker v-model="requiredDate" show-required-mark placeholder="带必填标记的日期选择器" />
    </div>

    <!-- 只读状态 -->
    <div class="test-section">
      <h4>只读状态</h4>
      <CDatePicker v-model="readonlyDate" readonly placeholder="只读的日期选择器" />
    </div>

    <!-- 自定义格式化 -->
    <div class="test-section">
      <h4>自定义格式化</h4>
      <CDatePicker v-model="formattedDate" format="YYYY年MM月DD日" placeholder="自定义格式化显示" />
      <div class="selected-value">选中日期: {{ formattedDate }}</div>
    </div>

    <!-- 上手值和变红逻辑测试 -->
    <!-- 1. 显示上手值但不变红（当前值与上手值相同） -->
    <div class="test-section">
      <h4>显示上手值但不变红（当前值与上手值相同）</h4>
      <CDatePicker
        v-model="sameOldValue"
        :show-old-value="true"
        old-value="2023-12-25"
        placeholder="当前值与上手值相同，不显示红色"
      />
      <div class="selected-value">当前值: {{ sameOldValue }} | 上手值: 2023-12-25</div>
      <div class="note">提示: 鼠标悬停可查看上手值</div>
    </div>

    <!-- 2. 显示上手值且变红（当前值与上手值不同） -->
    <div class="test-section">
      <h4>显示上手值且变红（当前值与上手值不同）</h4>
      <CDatePicker
        v-model="diffOldValue"
        :show-old-value="true"
        old-value="2023-12-25"
        placeholder="当前值与上手值不同，显示红色"
      />
      <div class="selected-value">当前值: {{ diffOldValue }} | 上手值: 2023-12-25</div>
      <div class="note">提示: 当前值与上手值不同时，文本会显示为红色</div>
    </div>

    <!-- 3. 隐藏上手值 -->
    <div class="test-section">
      <h4>隐藏上手值</h4>
      <CDatePicker
        v-model="hideOldValue"
        :show-old-value="false"
        old-value="2023-12-25"
        placeholder="隐藏上手值，无论当前值与上手值是否相同"
      />
      <div class="selected-value">当前值: {{ hideOldValue }} | 上手值: 2023-12-25 (隐藏)</div>
      <div class="note">提示: 即使设置了oldValue，但show-old-value为false时不显示上手值</div>
    </div>

    <!-- 4. 动态切换上手值和当前值测试 -->
    <div class="test-section">
      <h4>动态切换上手值和当前值测试</h4>
      <div class="dynamic-values">
        <div class="value-inputs">
          <input v-model="newOldValue" placeholder="新上手值" />
          <input v-model="newCurrentValue" placeholder="新当前值" />
          <button @click="updateDynamicValues">更新值</button>
        </div>
        <CDatePicker
          v-model="dynamicCurrentValue"
          :show-old-value="true"
          :old-value="dynamicOldValue"
          placeholder="动态切换上手值和当前值"
        />
        <button @click="toggleValues">切换当前值</button>
        <div class="selected-value">
          当前值: {{ dynamicCurrentValue }} | 上手值: {{ dynamicOldValue }}
        </div>
        <div class="note">
          提示: 点击"切换当前值"按钮可以切换当前值，观察是否变红；或输入自定义值后点击"更新值"
        </div>
      </div>
    </div>

    <!-- 事件处理测试 -->
    <div class="test-section">
      <h4>事件处理测试</h4>
      <CDatePicker
        v-model="eventDate"
        @change="handleChange"
        @clear="handleClear"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <div class="event-log">最后触发事件: {{ lastEvent }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CDatePicker from '@/components/CDatePicker/CDatePicker.vue'
// 基本日期选择
const basicDate = ref('')

// 日期范围选择
const dateRange = ref([])

// 日期时间选择
const dateTime = ref('')

// 日期时间范围选择
const dateTimeRange = ref([])

// 带清空功能
const clearableDate = ref('2023-12-25')

// 禁用状态
const disabledDate = ref('')

// 不同尺寸
const sizeDate1 = ref('')
const sizeDate2 = ref('')
const sizeDate3 = ref('')
const sizeDate4 = ref('')

// 带必填标记
const requiredDate = ref('')

// 只读状态
const readonlyDate = ref('2023-12-25')

// 自定义格式化
const formattedDate = ref('')

// 上手值和变红逻辑测试
const sameOldValue = ref('2023-12-25')
const diffOldValue = ref('2023-12-26')
const hideOldValue = ref('2023-12-25')
const dynamicOldValue = ref('2023-12-25')
const dynamicCurrentValue = ref('2023-12-25')
const newOldValue = ref('')
const newCurrentValue = ref('')

const toggleValues = () => {
  if (dynamicCurrentValue.value === dynamicOldValue.value) {
    dynamicCurrentValue.value = '2023-12-26'
  } else {
    dynamicCurrentValue.value = dynamicOldValue.value
  }
}

const updateDynamicValues = () => {
  dynamicOldValue.value = newOldValue.value
  dynamicCurrentValue.value = newCurrentValue.value
  newOldValue.value = ''
  newCurrentValue.value = ''
}

// 事件处理测试
const eventDate = ref('')
const lastEvent = ref('')

const handleChange = (value: any) => {
  lastEvent.value = `change: ${value}`
  console.log('Change event:', value)
}

const handleClear = () => {
  lastEvent.value = 'clear'
  console.log('Clear event')
}

const handleFocus = (event: FocusEvent) => {
  lastEvent.value = 'focus'
  console.log('Focus event:', event)
}

const handleBlur = (event: FocusEvent) => {
  lastEvent.value = 'blur'
  console.log('Blur event:', event)
}
</script>

<style lang="scss" scoped>
.c-date-picker-test {
  overflow: auto;
  height: 100%;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
}

h4 {
  margin-bottom: 10px;
  color: #666;
  font-size: 16px;
}

.test-section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

selected-value {
  margin-top: 10px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
}

button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  &:hover {
    background-color: #5a6268;
  }
}

.size-demo {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.size-demo c-date-picker {
  flex: 1;
  min-width: 150px;
}

.event-log {
  margin-top: 10px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.note {
  margin-top: 8px;
  padding: 8px;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  font-size: 12px;
  color: #856404;
}

.dynamic-values {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.value-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.value-inputs input {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 150px;
  font-size: 14px;
}

.value-inputs button {
  margin-top: 0;
}

.selected-value {
  margin-top: 10px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
}
</style>
